{extend name="base" /}
{block name="title"}群主充值{/block}
{block name="head"}
<style>
.weui_panel_hd:after {left:0;}
.weui-payselect-ul {margin-top:0; overflow:visible;}
a.weui-payselect-a {position:relative;}
a.weui-payselect-a span.weui-badge {position:absolute; right:-10px; top:-8px;}
.weui_panel_ft:before {left:0}
</style>
{/block}
{block name="body"}

<div class="weui_panel ms-controller" ms-controller="WEBPAY">

  <div class="weui_panel_hd">
    <div class="weui-flex">
      <div class="weui-flex-item">群号: {{@Info.Code}}</div>
      <div class="weui-flex-item">群标题: {{@Info.Caption}}</div>
    </div>
    <div class="weui-flex">
      <div class="weui-flex-item">群主: [{{@Info.GameID}}]{{@Info.NickName}}</div>
      <div class="weui-flex-item">群主钻石: {{@Info.RoomCard}}</div>
    </div>
  </div>

  <div class="weui_panel_bd">
  
    <div class="weui-pay">
      <ul class="weui-payselect-ul">
        <li class="weui-payselect-li" ms-for="(k,v) in @card">
          <a ms-class="['weui-payselect-a', @curr==k&&'weui-payselect-on']" ms-on-tap="@tapCard(k)">{{v.RMB|number(0,'','')}}元<span class="weui-pay-12">{{v.Coin}}</span><span class="weui-badge" ms-if="v.Zeng>0">赠{{v.Zeng}}</span></a>
        </li>
      </ul>
      <a class="weui_btn weui_btn_primary clear" ms-on-tap="@tapPay">确认充值</a>
    </div>
    
  </div>
  <div class="weui_panel_bd">
    <table class="weui-table" >
      <thead>
        <tr><th>#</th><th>订单号</th><th>金额</th><th>时间</th></tr>
      </thead>
      <tbody>
        <tr ms-if="@rows.length<=0"><td colspan="4">Oh~暂无数据!</td></tr>
        <tr ms-if="@rows.length>0" ms-for="(k,v) in @rows">
          <td>{{v.RO}}</td>
          <td>{{v.MerBillNo|truncate(12)}}</td>
          <td class="f-red">+{{v.RMB}}</td>
          <td>{{v.PayTime|date('MM/dd HH:mm')}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="weui_panel_ft" style="padding:0">
    <div class="weui-flex pager">
      <a class="weui-flex-item" ms-on-tap="@tapFirst">首页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapPre">上一页</a>
      <a class="weui-flex-item weui-border-l">{{@total}}#{{@page}}/{{@totalPage}}</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapNext">下一页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapEnd">尾页</a>
    </div>
  </div>
</div>

{/block}
{block name="foot"}
<script>
avalon.ready(function () {

  var vm = avalon.define({
    $id: "WEBPAY",
    card: {:json_encode($CARDS??[], JSON_UNESCAPED_UNICODE)},
    curr: 0,  // 当前选中第几张卡
    page: "{$page??1}" * 1, // 当前第几页
    size: "{$size??10}" * 1,  // 每页几条
    total: "{$total??0}" * 1, // 总共几条
    rows: {:json_encode($rows??[], JSON_UNESCAPED_UNICODE)},
    Info: {:json_encode($Info??[], JSON_UNESCAPED_UNICODE)},
    PURL: {:json_encode($PURL, JSON_UNESCAPED_UNICODE)},
    Code: "{$Code??0}",
    $computed: {
      totalPage: {
        get: function () {
          var max = Math.ceil(this.total / this.size); // 最大页数=向上取整
          max = max > 0 ? max : 1;
          return max;
        }
      }
    },
    ajaxPage: function (page) {
      $.req({
        url: "{:url('qunbpc')}",
        data: {
          page: page,
          code: this.Code
        },
        success: function (resp, status, xhr) {
          avalon.log(resp);
          if (resp.errno == 0) {
            vm.page = resp.data.page * 1;
            vm.size = resp.data.size * 1;
            vm.total = resp.data.total * 1;
            vm.rows.removeAll();
            vm.rows.pushArray(resp.data.rows);
          }
        }
      });
    },
    tapFirst: function () {
      avalon.log("tapFirst");
      this.ajaxPage(1);
      return false;
    },
    tapPre: function () {
      avalon.log("tapPre");
      var page = this.page - 1;
      page = page > 0 ? page : 1;
      this.ajaxPage(page);
      return false;
    },
    tapNext: function () {
      avalon.log("tapNext");
      var page = this.page + 1;
      page = page > this.totalPage ? this.totalPage : page;
      this.ajaxPage(page);
      return false;
    },
    tapEnd: function () {
      avalon.log("tapEnd");
      this.ajaxPage(this.totalPage);
      return false;
    },
    tapCard: function (idx) {
      this.curr = idx;
    },
    tapPay: function () {
      if (this.card.length <= 0) {
        return $.alert('面额未定义');
      }
      var GoodID = this.curr;
      var text = "充值`" + this.card[GoodID].RMB + "`元到群`" + this.Info.Code + "`<br/>群主`" + this.Info.NickName + "`身上?";
      console.log(text);
      $.modal({
        title: "确认充值",
        text: text,
        buttons: [
          {text:"支付宝",  onClick:function(){vm.jumpOrder(1,GoodID);}},
          {text:"微信支付",onClick:function(){vm.jumpOrder(2,GoodID);}},
          {text:"取消",className:"default"}
        ]
      });
    },
    jumpOrder: function (PayChannel , GoodID) {
      var data = $.param({
        UserID: this.Info.UserID,
        Channel: '{$Agent.Channel}',
        KindID: '{$Agent.PayLv}',
        GoodID: GoodID,
        Type: 2,
        meta_option:"{s:'WAP', n:'京东官网', id:'https://m.jd.com'}"
      });
      var url = this.PURL[PayChannel] + "?" + data;
      console.log(url);
      window.location.href = url;
    }
  });
  avalon.log(JSON.parse(JSON.stringify(vm)));
  avalon.scan(document.body);
});
</script>
{/block}